<template>
  <view class="wrapper">
    <swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500">
      <swiper-item
        v-for="(item, index) in swiper"
        :key="index"
        class="swpier-item"
      >
        <view class="image" @click="handleClick(item)" v-if="item.image">
          <u--image width="510rpx" height="210rpx" :fade="true" duration="450" lazy-load mode="widthFix" :src="baseUrl + item.image.path"></u--image>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import config from '../../../config/config'
export default {
  props: ['swiper'],
  data() {
    return {
      baseUrl: config.baseUrl
    }
  },
  methods: {
    handleClick(item) {
      const url = item.url
      if (url.length > 0) {
        uni.navigateTo({
          url
        })
      }
    }
  },
  updated() {
    console.log(22222)
  }
}
</script>

<style scoped lang="scss">
.wrapper {
  height: 210rpx;
  width: 100%;
  //background: red;
  .swiper {
    height: 210rpx;
    width: 100%;
    .swpier-item {
      display: block;
      height: 210rpx;
      line-height: 210rpx;
      background: red;
      .image {
        height: 210rpx;
        width: 510rpx;
        //background: red;
        image {
          width: 100%;
          height: 100%;
          display: block;
          margin: auto;
        }
      }
    }
  }
}
</style>
